﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools Documentation - Element/Element.Event.Pseudos</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
			<h4 class="menu-item"><a href="#Pseudos">Pseudos</a></h4>
			<div class="menu-item"><a href="#Pseudos:once">once</a></div>
			<div class="menu-item"><a href="#Pseudos:throttle">throttle</a></div>
			<div class="menu-item"><a href="#Pseudos:pause">pause</a></div>
			<h4 class="menu-item"><a href="#DOMEvent">DOMEvent</a></h4>
			<div class="menu-item"><a href="#DOMEvent:DOMEvent-definePseudo">DOMEvent.definePseudo</a></div>
    </div>
    <div class="l-border r-border span-15 content">
				<h1 id="Pseudos"><a href="#Pseudos">Element.Event.Pseudos</a></h1>

<p class="description">Defines a useful pseudo event: <code>:once</code> as well as the <code>definePseudo</code> method to create your own. See also the <code>:relay</code> pseudo in <a href="../../core/Element/Element.Delegation.html">Element.Delegation</a>.</p>

<h3>Demo</h3>

<ul>
<li><a href="http://mootools.net/demos/?demo=Element.Event.Pseudos">Element.Event.Pseudos</a></li>
</ul>
<h2 id="Pseudos:once"><a href="#Pseudos:once">Pseudo: once</a></h2>

<p class="description">The event will only fire once. The once pseudo will remove itself after the first excecution.</p>

<h3>Example:</h3>

<pre class="javascript">myElement.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click:once'</span>, <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
    <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'you clicked me'</span><span class="br0">)</span>;
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
<span class="co1">// If the user clicks the element twice, it will only once alert 'you clicked me'</span>
</pre>

<h3>Note:</h3>

<p>This is exactly the same as the <a href="../Class/Events.Pseudos.html#Pseudos:once">Events.Pseudos :once</a> pseudo event.</p>

<h2 id="Pseudos:throttle"><a href="#Pseudos:throttle">Pseudo: throttle</a></h2>

<p class="description">Makes sure the event is not fired more than once in a certain timespan.
This is especially useful for events that might fire a lot, like the scroll, resize
or keydown events. To get better performance instead of executing a heavy function,
like Request a lot of times, the event only fired once in, for example, 250 milliseconds.</p>

<p>The default timespan is <em>250</em> milliseconds.</p>

<h3>Example:</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'scroll:throttle'</span>, <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
    <span class="co1">// Will only fire once every 250 ms</span>
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
window.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'resize:throttle(400)'</span>, <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
    <span class="co1">// Will only fire once every 400 ms</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>Note:</h3>

<p>This is exactly the same as the <a href="../Class/Events.Pseudos.html#Pseudos:throttle">Events.Pseudos :throttle</a> pseudo event.</p>

<h2 id="Pseudos:pause"><a href="#Pseudos:pause">Pseudo: pause</a></h2>

<p class="description">The event is only fired when the original event is not fired again in the given
time. So when the first event is fired, and a second after 100 ms, the first
event is cancelled and only the second is fired. This is useful for example with
field autocompletion which uses Request.</p>

<p>The default pausetime is <em>250</em> milliseconds.</p>

<h3>Example:</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'keydown:pause'</span>, <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
    <span class="co1">// Default time is 250 ms</span>
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'keydown:pause(100)'</span>, <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
    <span class="co1">// The pause time is now 100 ms.</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>Note:</h3>

<p>This is exactly the same as the <a href="../Class/Events.Pseudos.html#Pseudos:pause">Events.Pseudos :pause</a> pseudo event.</p>

<h1 id="DOMEvent"><a href="#DOMEvent">DOMEvent</a></h1>

<h2 id="DOMEvent:DOMEvent-definePseudo" class="description"><a href="#DOMEvent:DOMEvent-definePseudo">Function: DOMEvent.definePseudo</a></h2>

<p class="description">It's possible to define your own pseudos with DOMEvent.definePseudo</p>

<h3>Syntax</h3>

<pre class="javascript">DOMEvent.<span class="me1">definePseudo</span><span class="br0">(</span><span class="kw3">name</span>, fn<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>name - (<em>string</em>) The pseudo name, for example <code>once</code> will become <code>click:once</code>
</li>
<li>fn - (<em>function</em>) The function that will get fired when the event is fired. This function should decide what will happen with the event, for example execute the event and remove the event</li>
</ol>
<h4>Signature:</h4>

<pre class="javascript">fn<span class="br0">(</span>split, fn, args<span class="br0">)</span><span class="br0">{</span>
</pre>

<ol>
<li>split - (<em>object</em>) a parsed object of the <code>event:pseudo(value)</code> string

<ul>
<li>event - (<em>string</em>) the part before the <code>:</code>
</li>
<li>value - (<em>string</em>) between <code>(</code> and <code>)</code>
</li>
<li>pseudo - (<em>string</em>) between the <code>:</code> and <code>(</code>
</li>
<li>original - (<em>string</em>) the original event name, thus <code>event:pseudo(value)</code>
</li>
</ul>
</li>
<li>fn - (<em>function</em>) This is the function that has been passed in the <code>addEvent</code> method. So it is the 'fn' in <code>myEvent.addEvent('event:pseudo', fn)</code>
</li>
<li>args - (<em>array</em>) An array with arguments. The <a href="../../core/Types/DOMEvent.html">DOMEvent</a> object is in most cases the first element.</li>
</ol>
<p>The <code>this</code> variable refers to the Element where the event is added to.</p>

<h3>Example</h3>

<p>This is how the :once pseudo is implemented</p>

<pre class="javascript">DOMEvent.<span class="me1">definePseudo</span><span class="br0">(</span><span class="st0">'once'</span>, <span class="kw2">function</span><span class="br0">(</span>split, fn, args<span class="br0">)</span><span class="br0">{</span>
    fn.<span class="me1">apply</span><span class="br0">(</span><span class="kw1">this</span>, args<span class="br0">)</span>;
    <span class="kw1">this</span>.<span class="me1">removeEvent</span><span class="br0">(</span>split.<span class="me1">original</span>, fn<span class="br0">)</span>;
<span class="br0">}</span><span class="br0">)</span>;
</pre>

    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
